<template>
  <div class="base-container">
    <div class="verify-container">
      <div class="title">
        <span class="sp1"></span>
        <span class="sp2">添加站点</span>
      </div>

      <div class="conpane">
        <div v-if="formData.status==1" class="top-step">
          <xStep :items="list" :active="activeId"></xStep>
        </div>

        <div v-show="activeId == 0" class="c-con">
          <div class="c-con-m">
            <div class="c-con-m-p">
              <el-form
                label-position="right"
                label-width="220px"
                :model="formData"
                size="mini"
              >
                <el-form-item required label="网站属性：" v-if="hasMain()">
                  <el-tag type="info">官方网站</el-tag>
                  <el-tag >其他主站点</el-tag>
                </el-form-item>
                <el-form-item required label="网站属性：" v-else>
                  <el-tag>官方网站</el-tag>
                  <el-tag type="info">其他主网站</el-tag>
                </el-form-item>
                <el-form-item required>
                  <el-select slot="label" v-model="formData.head" placeholder="请选择协议头">
                    <el-option label="http://" value="http://"></el-option>
                    <el-option label="https://" value="https://"></el-option>
                  </el-select>
                  <el-input
                    v-model="formData.link"
                    :disabled="formData.status==2"
                    @blur="checkSideInfo"
                    placeholder="如留空，搜索结果将展示自动抓取的名称"
                  ></el-input>
                </el-form-item>
                <el-form-item required label="主站点名称：">
                  <el-input
                    v-model="formData.name"
                    :disabled="formData.status==2"
                    placeholder="如留空，搜索结果将展示自动抓取的名称"
                  ></el-input>
                </el-form-item>
                <el-form-item required label="描述信息：">
                  <el-input
                    :disabled="formData.status==2"
                    v-model="formData.desc"
                    placeholder="如留空，搜索结果将展示自动抓取到的描述信息"
                  ></el-input>
                </el-form-item>
                <el-form-item required label="icp备案号：">
                  <el-input :disabled="formData.status==2"
                            v-model="formData.NO"
                          placeholder=""
                  ></el-input>
                </el-form-item>
                <el-form-item required label="选择推广区域："v-for="(item, index) in ruleForm.keys" :key="index" >
                  <el-tag
                    style="margin-right: 6px;"
                    :key="tag"
                    v-for="tag in item.citys"
                    closable
                    :disable-transitions="false"
                    @close="()=>{handleClose(tag,item)}">
                    {{tag}}
                  </el-tag>
                  <el-cascader
                    placeholder="+ 城市"
                    :disabled=" (item.citys&&item.citys.length>=5)"
                    v-model="item.city"
                    :options="options"
                    @change="(value)=>{handleChange(value,item)}">
                  </el-cascader>
                </el-form-item>

                <div class="c-con-m" style="text-align: center;margin: 2rem 0;">
                  <div style="text-align: center;">
                    <el-button
                      type="primary"
                      style="width:8rem;"
                      size="small"
                      @click="next"
                    >下一步
                    </el-button>
                  </div>
                </div>
              </el-form>
            </div>
          </div>
        </div>

        <div v-if="activeId == 1" class="c-con">
          <el-form
            label-position="right"
            label-width="1px"
            :model="formData"
            size="mini"
          >
            <el-form-item required label="">
              <el-checkbox-group v-model="formData.kind" :max="5">
                <el-checkbox-button v-for="(label,index) in typeList" :label="label" name="type"
                                    class="type-item"></el-checkbox-button>
              </el-checkbox-group>
            </el-form-item>
          </el-form>

          <div class="c-con-m" style="text-align: center;margin: 2rem 0;">
            <el-button
              type="primary"
              style="width:8rem;"
              size="small"
              @click="pre"
            >上一步
            </el-button
            >
            <el-button
              type="primary"
              style="width:8rem;"
              size="small"
              @click="next"
            >下一步
            </el-button
            >
          </div>
        </div>

        <div v-else-if="activeId == 2" class="c-con">
          <div class="c-con-m p3">
            验证您对{{formData.head+formData.link}}的所有权，您可以选择任意一种方式进行验证。请选择验证方式：
          </div>
          <div>
            <site-owner :formData="formData"></site-owner>
          </div>
          <div class="c-con-m" style="text-align: center;margin: 2rem 0;">
            <el-button
              type="primary"
              style="width:8rem;"
              size="small"
              @click="pre"
            >上一步
            </el-button
            >
            <el-button
              type="primary"
              style="width:8rem;"
              size="small"
              @click="checkOwner"
              :disabled="loading"
            >完成
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {validUsername} from "@/utils/validate";
  import {trace} from "../../utils/trace";
  import {getFileUrl} from "../../utils"
  import {upFile} from "../../api/file"
  import { getsiteinfo, verify } from '../../api/verify'
  import xStep from "../../components/xStep/xStep"
  import {mapGetters} from "vuex"
  import SiteOwner from "./conponents/site-owner"
  import {getCitys} from "../../utils/tools"

  export default {
    components: {SiteOwner, xStep},
    name: "verify",
    data() {
      let activeIndex = function () {
        let navItem = this.navItems.find(item => {
          return this.$route.path.indexOf(item.path) != -1;
        });
        return "/verify" + navItem.path;
      }
      return {
        isEdit:true,
        options: [],
        ruleForm: {
          address: "", //链接地址
          name: "", //服务名称
          desc: "", //描述信息
          expense: "", //推广费用
          balance: "", //目前可用余额
          mark:"",
          keys: [
            {
              keyName: "",
              keyRank: "1",
              keyDec: "",
              keyTime: "30天",
              city:"",
              citys:[],
            }
          ]
        },
        navItems: [
          {title: "企业认证", path: "/index"},
          {title: "站点管理", path: "/site"},
        ],
        list: [
          "输入认证信息",
          "申请认证",
          "提交认证",
        ],
        loading: false,
        titleList: ["企业信息认证", "申请认证", "提交认证"],
        dialogTableVisible: false,
        activeId: 0,
        fileImg1: "",
        fileImg2: "",
        fileImg3: "",
        typeList: [
          "工商注册", "商标专利", "投资担保", "财务会计", "法律咨询", "商务咨询", "保险服务",
          "护照签证", "翻译速记", "营销推广", "运营服务", "影像服务", "建站服务",
          "电商服务", "设计服务", "开发服务", "网络维护", "服装定制", "礼品定制", "办公设备",
          "货运物流", "喷绘招牌", "印刷包装", "商务制卡", "展会服务", "建筑维修", "机械设备",
        ],
        formData: {
          type: "2",
          status: 1,   //1 初始  2 进行中  3 通过  4 失败
          kind: [],
          head: "",
          link: "tracing.glpro.io",
          name: "",
          desc: "",
          NO: "",
          region: "",
          level: 1
        }
      };
    },
    created() {
      this.options = getCitys();
    },
    mounted: function () {


      // this.loading = true;
      // this.$store.dispatch('verify/verifyDetailMe').then((data) => {
      //   trace("verifyDetailMe", data)
      //   this.setFormdata(data);
      //   this.loading = false;
      // }).catch(() => {
      //   this.loading = false
      // })
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'sites',
        "name",
      ]),
    },
    methods: {
      async checkSideInfo() {
        if (this.formData.head!=null||this.formData.link!=null) {
          let path = this.formData.head + this.formData.link
          let res = await getsiteinfo({ url: path })
          this.formData.name = res.data.title
          this.formData.desc = res.data.content
        }
      },
      handleClose(tag,item){
        // trace("change-to =",tag,JSON.stringify(item))
        if(item){
          let id = item.citys.indexOf(tag)
          if(id>=0){
            item.citys.splice(id,1);
          }
        }
        this.upItem(item);
        let item1 = this.ruleForm;
        this.ruleForm = {};
        this.ruleForm = item1;

        // trace("change-to2 =",tag,JSON.stringify(item))
      },
      handleChange(value,item) {

        item.citys.push(value[1])
        this.formData.region = value[1];
        setTimeout(()=>{
          this.formData.region = value[1];
          let aa = this.formData;
          this.formData = {};
          this.formData = aa;

        },25)
      },
      setFormdata: function (data) {
        for (let key in data) {
          if (this.formData[key] != null) {
            if (key == "establishedTime") {
              this.formData[key] = (new Date(data[key])).toString()
            } else if (key == "licence" || key == "cardFront" || key == "cardBack") {

            } else {
              this.formData[key] = data[key];
            }
          }
        }
        this.fileImg1 = data.licence;
        this.fileImg2 = data.cardFront;
        this.fileImg3 = data.cardBack;
      },
      changeFile: async function (id, value) {
        if (!value) return;
        var file = document.getElementsByClassName("ip-file" + id)[0].children[0];
        this["fileImg" + id] = getFileUrl(file);
        var f2 = file.files[0];

        let param = new FormData(); //创建form对象
        param.append("img", f2);
        var res = await upFile(param);

        this["fileImg" + id] = res.data.url;

      },
      handleSelect(key, keyPath) {
        this.$router.push({path: key});
      },
      pre: function () {
        this.activeId -= 1;
        if (this.activeId < 0) {
          this.activeId = 0;
        }
      },
      next: function () {
        this.activeId += 1;
        if (this.activeId > 2) {
          this.activeId = 2;
        }
      },
      //查询网站的的拥有权限
      checkOwner: function () {
        this.$store.dispatch('verify/getOwner', {
          type: this.formData.type,
          link: this.formData.head + this.formData.link
        }).then((data) => {
          this.loading = false;

          this.verify();
        }).catch((err) => {
          this.loading = false;
          this.activeId = 0;
        })
      },
      hasMain() {

        let obj = this.sites.find(item => {

          return item.tag == "官网"
        })
        return obj != null;
      },
      verify: async function () {
        if (this.sites.length == 3) return
        let {link, type, name, desc, NO, region, kind, level
        } = this.formData;
        let arr = [1, 2, 3];
        if (this.sites.length != 0) {
          for (var i = 0; i < arr.length; i++) {
            var aa = this.sites.find(item => {
              return item.level == arr[i]
            })
            if (!aa) {
              level = arr[i];
              break;
            }
          }
        }
        link = this.formData.head + this.formData.link;
        this.loading = true;
        this.$store.dispatch('verify/verifySite', {link, type, name, desc, NO, region, kind, level}).then((data) => {

          this.$store.dispatch('user/getInfo');
          this.$store.dispatch('user/getConfig');
          this.$router.push({path: "/verify/site"})
          this.loading = false;


        }).catch((err) => {
          this.loading = false;
        })


      },

      lookAgreement: function (value) {
        this.$router.push({path: "/verify/agreement"});
      },
      selectImg: function (value) {
        if (this.formData.status == 2) return
        document.getElementsByClassName("ip-file" + value)[0].children[0].click();
      }
    }
  };
</script>

<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg: #283443;
  $light_gray: black;
  $cursor: black;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .register-container .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui css */
  .register-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: transparent;
        -webkit-appearance: none;
        border-radius: 5px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }
.el-cascader{


}
    .el-form-item {
      /*border: 1px solid rgba(0, 0, 0, 0.3);*/
      /*background: transparent;*/
      /*border-radius: 5px;*/
      color: black;
    }
  }
</style>

<style lang="scss" scoped>
  $bg: white;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $main_color: #134bde;

  .verify-container {
    min-height: 100%;
    // width: calc(100vw - 72px);
    background-color: $bg;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    border-radius: 10px;
    margin: 36px 36px 0 36px;

    .title {
      position: relative;
      width: 100%;
      background-color: white;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      line-height: 38px;
      display: flex;
      align-items: baseline;
      border-bottom: 1px solid #f0f0f0;
      padding: 5px 2rem;

      .sp1 {
        width: 4px;
        height: 19px;
        background: #134bdf;
        border-radius: 2px;
        margin-right: 10px;
      }

      .sp2 {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        line-height: 38px;
      }
    }

    .conpane {
      width: 100%;
      padding: 1rem 2rem;

      .top-step {
        background-color: rgba(237, 241, 244, 0.5);
        padding: 0.6rem;
      }

      .minLH {
        line-height: 1.5rem;
        color: #ff1f34;
      }

      .c-con {
        width: 990px;
        margin: 5px calc(50% - 495px);

        .type-item {
          margin: 15px;
          width: 100px;
          height: 40px;


        }


        .c-con-m {


        }

        .p3 {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #333333;
          line-height: 38px;
          text-align: left;
          margin: 2rem auto;
          width: 760px;
        }

        .p2-text {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ff1f34;
          line-height: 38px;
        }

        .c-con-m-p {
          .ip-file1,
          .ip-file2,
          .ip-file3 {
            width: 140px;
            height: 140px;
            position: absolute;
            opacity: 0;
          }

          .c-con-m-t {
            border-bottom: 1px solid #f0f0f0;
            padding: 0 10px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #666666;
            line-height: 38px;
            margin: 20px 0;
          }
        }
      }
    }
  }

  .verify-menu {
    text-align: center;
    background-color: white;

    .verify-menu-box {
      margin-top: 4px;
      display: inline-block;
      overflow: auto;
      border-bottom-color: #ffffff !important;
    }
  }
</style>

<style scoped>
  ::v-deep .el-input {
    width: 640px;
  }
  ::v-deep .el-select .el-input {
    width: 120px;
  }

  ::v-deep .el-checkbox-button .el-checkbox-button__inner {
    width: 100%;
    height: 100%;
    border-radius: 5px !important;
    padding: 12px 15px;
    border: 1px solid #DCDFE6;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .el-step.is-center .el-step__line {
    left: 0%;
    right: 0;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  ::v-deep .el-dialog {
    border-radius: 10px;
    width: 1150px;
    max-width: 80%;
  }

  .decoration input {
    text-decoration: line-through;
  }
</style>
<style>
.el-cascader .el-input .el-input__inner{
    width: 25%;
}
</style>
